<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8" />
	<title>公司地址</title>
	<link rel="icon" href="/favicon.png" />
	<script charset="utf-8"
		src="https://webapi.amap.com/maps?v=1.4.6&key=ec0eb8cb871457548fd27ffc89c826be&plugin=AMap.Geocoder,AMap.PolyEditor,AMap.ToolBar,AMap.Scale,AMap.MouseTool&callback=init"></script>
	<script type="text/javascript">
		const longitude = 120.022896;
		const latitude = 30.276010;
		const zoomlevel = 14;
		let map, marker;
		window.init = function () {
			console.log('345')
			map = new AMap.Map('container', {
				center: [longitude, latitude],
				zoom: zoomlevel
			});
			marker = new AMap.Marker({
				position: new AMap.LngLat(longitude, latitude),   // 经纬度对象，也可以是经纬度构成的一维数组[119.920486,30.245285]
				title: '西溪联合科技广场'
			});
			map.add(marker);
			marker.on('click', openInfo)
			AMap.plugin('AMap.ToolBar', function () {//异步加载插件
				var toolbar = new AMap.ToolBar();
				map.addControl(toolbar);
			});
		}
		function openInfo() {
			//构建信息窗体中显示的内容
			var info = [];
			info.push("<div class='input-card content-window-card'><div><img style=\"float:left;\" src=\" https://webapi.amap.com/images/autonavi.png \"/></div> ");
			info.push("<div style=\"padding:7px 0px 0px 0px;\"><h4>杭州量子原力科技有限公司</h4>");
			info.push("<p class='input-item'>地址 :杭州市余杭未来科技城西溪联合科技广场7幢709</p></div></div>");
			info.push("<p class='input-item'>电话 :0571-xxxxxxxx</p></div></div>");

			infoWindow = new AMap.InfoWindow({
				content: info.join("")  //使用默认信息窗体框样式，显示信息内容
			});

			infoWindow.open(map, marker.getPosition()); //原文是open(map, map.getCenter());
		}
	</script>
</head>

<body>
	<div id="container" style="width: 100%; height: 100vh;"></div>
</body>

</html>